<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/images.js"></script>
<script type="text/javascript"
	src="../grid/js/controllers/controller-grid.js"></script>
<script type="text/javascript" src="../grid/js/views/view-grid.js"></script>


<style type="text/css">
#div1 {
	width: 350px;
	height: 70px;
	padding: 10px;
	border: 1px solid #aaaaaa;
}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
//ev.target.appendChild(document.getElementById(data));
//addImage(260, 70, 60, 65, '');
addImage(260, 70, 60, 65,document.getElementById(data).src);
//alert(data);
}

</script>

</head>
<body onload="initcomponents({root:'graph'});">

	<div style="position: relative;">
		<canvas id="grid" width="600" height="600"
			style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
		<canvas id="tshirt" width="600" height="600" ondrop="drop(event)"
			ondragover="allowDrop(event)"
			style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
		<canvas id="graph" width="600" height="600" ondrop="drop(event)"
			ondragover="allowDrop(event)"
			style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
	</div>
	<div
		style="float: left; margin-left: 600px; background: #EEEEEE; height: 600px; width: 250px;">
		<img id="drag1"
			src="%3D"
			draggable="true" ondragstart="drag(event)" width="106" height="69">
	</div>



</body>
</html>